<template>
  <div>
    <div class="back_box" :style="{'padding-top':height+'px'}">
      <div class="back_btn">
        <img v-show="showView" @click="$emit('back')" src='../assets/helpRobot/jiantou@2x.png'>
      </div>
      <div class="back_text" v-if="titlesub" :class="titlesub?'flex_box':''">
        <div class="flex_box_title" @click="totitle()" :class="active=='1'?'active':''">
          {{title}}
        </div>
        <div class="flex_box_title" @click="tosubtitle()" :class="active=='2'?'active':''">
          {{titlesub}}
        </div>
      </div>
      <div class="back_text" style="display: flex;flex-direction: column;justify-content: center;">
        <div style="line-height: 30px;"> {{title}}</div>
        <div style="color: #818181;font-size: 11px;line-height: 15px;">
          {{ subheading }}
        </div>

      </div>
      <div class="back_text1">
        <slot></slot>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    subheading: {
      type: String,
      default: "",
    },
    titlesub: {
      type: String,
      default: "",
    },
    showView: {
      type: Boolean,
      default: true,
    },
    active: {
      type: String,
      default: "1",
    },
  },
  data(){
    return {
      height: ''
    }
  },
  created() {
    this.gettopheight()
  },
  methods: {
    gettopheight(){
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        let res = phone.getTopHeight()
        let datas = JSON.parse(res)
        localStorage.setItem('height', datas.height)
        this.height = datas.height
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          this.$bridge.callhandler('getTopHeight', {}, res => {
            let datas = res
            localStorage.setItem('height', datas.height)
            this.height = datas.height
          })
        })
      }
    },
    tosubtitle() {
      let num = 0;
      this.$router.replace({
        name: "orders5g",
        params: { num },
      });
    },
    totitle() {
      let num = 0;
      this.$router.replace({
        name: "orders",
        params: { num },
      });
    },
  },
};
</script>
<style scoped>
.back_box {
  background: transparent !important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 99;
}
.back_btn {
  width: 20vw;
  margin: 1.33vw 0 0 3vw;
  /* position: absolute; */
  /* left: 5.3vw; */
  /* top: 2.3vw; */
}
.back_btn img {
  height: 5.8vw;
}
.back_text {
  font-size: 4.8vw;
  text-align: center;
  color: #fff;
  font-weight: bold;
  /* position: absolute; */
  /* right: 44vw; */
}
.back_text1 {
  font-size: 4.8vw;
  float: right;
  margin-right: 3vw;
  width: 20vw;
}
.flex_box {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.active {
  color: #f40c28;
}
</style>
